<template>
  <div class="container" @mouseover="mouseOver" @mouseout="mouseOut">
    <div class="fixedToTop">
      <CommonTitle><p slot="title">课程信息</p></CommonTitle>
      <table>
        <thead>
          <tr>
            <th style="width: 120px">课程</th>
            <th style="width: 120px">课程名称</th>
            <th style="width: 140px">授课老师</th>
            <th>课程价格(元)</th>
          </tr>
        </thead>
      </table>
    </div>
    <table>
      <tbody :class="{ anim: myanimate == true }">
        <tr v-for="(item, index) in showList" :key="index">
          <td style="width: 120px">
            <img :src="item.imgurl" alt="" />
          </td>
          <td style="width: 120px">{{ item.classname }}</td>
          <td style="width: 140px">{{ item.teacher }}</td>
          <td>{{ item.price }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import CommonTitle from "./CommonTitle";
export default {
  components: {
    CommonTitle,
  },
  props: ["classData"],
  data() {
    return {
      showList: [],
      myanimate: Boolean,
      // tableData: [
      //   {
      //     imgurl: require("@/assets/HomeViewImages/class/main-kecheng1.png"),
      //     classname: "幼儿英语入门课程",
      //     teacher: "王大山",
      //     price: "2366",
      //   },
      //   {
      //     imgurl: require("@/assets/HomeViewImages/class/main-kecheng2.png"),
      //     classname: "幼儿英语入门课程",
      //     teacher: "王大山",
      //     price: "2366",
      //   },
      // ],
    };
  },
  mounted() {
    this.timer = setInterval(this.scroll, 2000);
  },
  watch: {
    classData(newV, oldV) {
      var arr = JSON.parse(JSON.stringify(newV));
      this.showList = arr;
    },
  },
  methods: {
    scroll() {
      this.myanimate = true; // 因为在消息向上滚动的时候需要添加css3过渡动画，所以这里需要设置true
      setTimeout(() => {
        //  这里直接使用了es6的箭头函数，省去了处理this指向偏移问题，代码也比之前简化了很多
        this.showList.push(this.showList[0]); // 将数组的第一个元素添加到数组的最后
        this.showList.shift(); //删除数组的第一个元素
        this.myanimate = false; // margin-top 为0 的时候取消过渡动画，实现无缝滚动
      }, 1000);
    },
    mouseOver() {
      // console.log("鼠标悬停");
      // this.myanimate = false;
      clearInterval(this.timer);
    },
    mouseOut() {
      // this.myanimate = true;
      this.timer = setInterval(this.scroll, 2000);
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  box-sizing: border-box;
  padding: 24px;
  padding-top: 0;
  height: 100%;
  overflow-y: scroll;
  position: relative;
  background-color: #fff;
  &:hover h3 {
    color: #438afe;
  }
  // 隐藏滚动条
  &::-webkit-scrollbar {
    width: 0 !important;
  }
  & {
    -ms-overflow-style: none;
  }
  & {
    overflow: -moz-scrollbars-none;
  }
  .fixedToTop {
    position: sticky;
    top: 0;
    left: 0;
    z-index: 2000;
    background-color: #fff;
    padding-top: 24px;
  }
  table {
    box-sizing: border-box;
    padding: 0 20px;
    text-align: center;
    width: 100%;
    th {
      font-size: 16px;
      line-height: 26px;
      font-family: "微软雅黑";
      font-weight: bold;
      color: #333333;
      &:nth-of-type(1),
      &:nth-of-type(2) {
        text-align: left;
        padding-left: 20px;
      }
    }
    .anim {
      transition: all 1s;
      margin-top: -42px;
    }
    tbody tr {
      height: 72px;
      line-height: 60px;
      td {
        padding: 10px 0;
        font-size: 14px;
        font-family: "微软雅黑";
        color: #333333;
        &:nth-of-type(4n + 1),
        &:nth-of-type(4n + 2) {
          text-align: left;
          padding-left: 20px;
        }
      }

      img {
        width: 80px;
        height: 60px;
        vertical-align: middle;
        background-color: #438afe;
      }
    }
  }
}
</style>